<template>
  <div class="box">
    <div class="title">数据筛选</div>
    <div class="search">
      <div class="input">
        <a-input v-model="searchName" :style="{width:'320px',height: '40px',borderRadius: '5px',  border: '1px solid #165dff'}" placeholder="请输入角色" allow-clear />
        <a-button type="primary" @click="handelSearch">查询</a-button>
        <a-button type="outline" @click="handelRest">
          <template #icon>
            <icon-refresh />
          </template>
          <template #default>重置</template>
        </a-button>
        <a-button type="primary" status="success" @click="handelAddUser">
          <template #icon>
            <icon-plus />
          </template>
          <template #default>新建角色</template>
        </a-button>
        <AddUser :visible="visible"/>
      </div>
    </div>
    <div class="table">
      <div class="title">数据列表</div>
      <RoleTable/>
    </div>
  </div>

</template>

<script lang="ts" setup>
import RoleTable from "./components/RoleTable.vue";
import AddUser from "./components/UserDrawp.vue";
import {ref} from "vue";
import {useUser} from "../../store/user";
import {getUser} from "../../api/user/user";
import { Message } from "@arco-design/web-vue";

let visible = ref<boolean>(false)
// 查询框v-model
let searchName = ref<string>('')

// 新增用户
const userStore = useUser()
const handelAddUser =() => {
  userStore.visible = true
  userStore.judgeBool = false
}
// 查询用户
const handelSearch = () => {
  getUser(searchName.value).then(res => {
    userStore.RoleObject = res.data.results
    Message.success('查询成功')
  })
}
// 重置
const handelRest = () => {
  getUser().then(res => {
    userStore.RoleObject = res.data.results
    Message.success('重置成功')
  })
}
</script>

<style  lang="scss" scoped>
.box {
  width: 1400px;
  height: 800px;
  background-color: #f1f3f4;
  margin:  90px auto;
  border-radius: 20px;

  .title {
    height: 50px;
    border-bottom: 1px solid #ccc;
    color: #000;
    text-align: left;
    line-height: 50px;
    font-weight: 900;
    padding-left: 20px;
    font-size: 20px;
  }
  .search {
    height: 75px;
    border-bottom: 1px solid #ccc;
    //width: 620px;

    .input {
      float: right;
      margin-top: 13px;
      margin-right: 20px;
    }
  }
  button {
    height: 40px;
    margin: 5px;
    border-radius: 5px;
  }
}
</style>
